{% extends "base_list.html" %}

{% block more_filter -%}

    <div class="form-group">
        <label class="col-sm-2 control-label">创建时间</label>
        {{ list_datetime_range("create_time", "form-control instant-filter", "YYYY-MM-DD") }}
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">类型:</label>
        <div class="col-sm-2">
            <select id="type" name="type" class="form-control">
                <option value="">全部</option>
                <option value="0">直营</option>
                <option value="1">非直营</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">状态:</label>
        <div class="col-sm-2">
            <select id="status" name="status" class="form-control">
                <option value="">全部</option>
                <option value="0">未发布</option>
                <option value="1">已发布</option>
            </select>
        </div>
    </div>
{%- endblock more_filter %}

{% block list_body %}
    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="row mbh">

                        <div class="col-sm-12 dataTables_filter">

                            <a href="/bkp/pic/bkp_pic_modify/?opt=add" class="btn btn-primary">
                                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                                新增
                            </a>
                        </div>

                    </div>

                    <div class="table-responsive">
                        <table class="table table-striped table-bordered table-hover" id="dataTables">
                            <thead>
                            <tr>
                                <th>元素名称</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody id="id-list">
                            </tbody>
                        </table>
                    </div>
                    <!-- /.dataTable_wrapper -->
                </div>
                <!-- /.panel-body -->
            </div>
            <!-- /.panel -->
        </div>
    </div> <!-- /.row -->
{% endblock list_body %}

{% block body_js %}



    <script src="{{ static('js/fileinput.js') }}"></script>
    <script src="{{ static('js/fileinput_locale_zh.min.js') }}"></script>

    <script type="text/javascript">
        //初始化fileinput控件（第一次初始化）
        function initFileInput(ctrlName, uploadUrl) {
            var control = $('#' + ctrlName);
            control.fileinput({
                language: 'zh', //设置语言
                uploadUrl: uploadUrl, //上传的地址
                allowedFileExtensions: ['jpg', 'png', 'gif', 'mp3', 'midi'],//接收的文件后缀
                showUpload: false, //是否显示上传按钮
                showCaption: false,//是否显示标题
                browseClass: "btn btn-primary", //按钮样式
                previewFileIcon: "<i class='glyphicon glyphicon-king'></i>"
            });
        }
    </script>


    <script>
        $(document).ready(function () {
            initFileInput("sublevel_background", "/User/EditPortrait");
            initFileInput("sublevel_backmusic", "/User/EditPortrait");
        });
    </script>


    <script>
        $(document).ready(function () {
            var table = $('#dataTables').dataTable({
                "dom": 'ltpr',
                "language": {
                    "url": "{{ static('lib/js/dataTable.Chinese.json') }}"
                },
                "responsive": true,
                "lengthChange": false,
                "serverSide": true,
                "ajax": {
                    url: "/bkp/target/datatable/",
                    type: "POST",
                    data: {
                        csrfmiddlewaretoken: "{{ csrf_token }}",

                    },
                },
                "columns": {{ list_fields.to_json()|safe }},
                "searchCols": [
                    {% for col in list_fields.to_list() -%}
                        {% if col.name in searches -%}
                            {{ searches[col.name]|jsonify|safe }},
                        {% else %}
                            null,
                        {%- endif %}
                    {%- endfor %}
                ],
                "columnDefs": [
                    {
                        "targets": [2],
                        "render": function (data, type, full, meta) {


                            var edit = data.edit;

                            console.log(full);
                            return '' +
{#                                '<a class="btn btn-primary" href="/bkp/pic/bkp_pic_modify/?opt=' + opt + '&id=' + picid + '">' + edit + '</a>&nbsp;' +#}
                                '<a class="btn btn-primary" href="/bkp/pic/bkp_target_modify/?opt=edit' + '">' + edit + '</a>&nbsp;'
                        },
                    },
                ],
                "order": [[0, 'desc']],
                "processing": true,
                "deferRender": true,
                {#
                {% if not searches -%}
                "deferLoading": true,
                {%- endif %}
                #}
                "pageLength": 10,
            });


            $('#function').change(function () {
                var $selAll = $('#select-allpage');
                if ($(this).val() == 'set_refunded') {
                    $selAll.removeAttr('checked');
                    $selAll.attr('disabled', 'disabled');
                } else {
                    $('#select-allpage').removeAttr('disabled');
                }
            });
            //=== search click ===
            $("#id-search-btn").on("keyup click", function () {
                search();
            });

            $("#id-th-checkbox").on("change", function () {
                $("#id-list").find("input[type=checkbox]").prop("checked", $(this).prop("checked"));
            });


            $("#select-allpage").on("click", function () {
                $("#id-th-checkbox").prop("checked", $("#select-allpage").prop("checked"));
                $("#id-list").find("input[type=checkbox]").prop("checked", $("#select-allpage").prop("checked"));
            });

        });
    </script>
{% endblock %}
